<script setup>
import { getCategoryList, querySnacksList } from '@/api/snacks.js'
import { onMounted, ref, defineProps, defineEmits, watch, compile } from 'vue'

const snacksType = ref([]) //零食分类
const snacksList = ref([]) //选中分类后中间框显示零食列表 
const allSnacksList =ref([]) //所有的零食列表
const keyInd = ref(0) //零食分类索引
const checkedList = ref([])//勾中的数据
const checkedListAll = ref([]) //右边框中的零食列表
const ids = ref(new Set()) //存储已经添加的零食分类的 id

const snacksListCache =ref([])

const props =  defineProps({
  checkList :{ default: [] },
  seachKey:{ default: '' },
  snackshList:{ default: [] }
})

const  emit  = defineEmits(['checkList'])


onMounted(() => {
  getSnacksType()
  init()
})

const init = ()=>{
  // console.log(checkList)
  // // 初始化选项
   checkedList.value = props.checkList.map((it) => it.name)
  //  console.log(checkedList.value) 传过来的数据赋值给了 右边框的数据
   checkedListAll.value = props.checkList.reverse()
}

//获取零食分类
const getSnacksType = async () => {
  const res = await getCategoryList({ type: 1 })
  if (res.data.code === 1) {
    snacksType.value = res.data.data
    getSnacksList(res.data.data[0].id)
  }
}

//点击零食分类
const checkTypeHandle = (ind, id) => {
  // console.log(ind, id)
  keyInd.value = ind
  getSnacksList(id)
}

//通过零食分类id 查零食
const getSnacksList = async id => {
  // console.log(id)
  const res = await querySnacksList({ categoryId: id })
  //  console.log(res)
  if (res.data.code === 1) {
    if (res.data.data.length == 0) {
      snacksList.value = []
      return
    }
    const newArr = res.data.data
    //为了给数量
        newArr.forEach((n) => {
          n.snacksId = n.id
          n.copies = 1
          n.snacksName = n.name
        })
        //  console.log(newArr)
    snacksList.value = newArr
    //allSnacksList 中不会重复包含相同的零食数据
    if (!ids.value.has(id)) {
      allSnacksList.value = [...allSnacksList.value, ...newArr]
        }
        ids.value.add(id)
  }
}

//勾选零食时
const checkedListHandle =(value) =>{
  // console.log(checkedListAll.value) // 
  //数据处理前反正 为正序
  checkedListAll.value.reverse()
  // console.log(checkedListAll.value.reverse())

  const list = allSnacksList.value.filter((item) => {
      let data
      value.forEach((it) => {
        if (item.name == it) {
          data = item
        }
      })
      return data
    })
    console.log(list)
  // 编辑的时候需要与已有零食合并  所以每次点击选中会 之前的再加入
   // 与当前请求下的选择 然后去重就是当前的列表
   const snacksListCat = [...checkedListAll.value, ...list]
      console.log(snacksListCat)
   let arrData = []
    checkedListAll.value = snacksListCat.filter((item) => {
      let allArrDate
      if (arrData.length == 0) {
        arrData.push(item.name)
        allArrDate = item
      } else {
        const st = arrData.some(it => item.name == it)
        if (!st) {
          arrData.push(item.name)
          allArrDate = item
        }
      }
      return allArrDate
    })

  
  emit('checkList', checkedListAll.value)
  // 数据处理完反转为倒序
  checkedListAll.value.reverse()
}

const open = (done) =>{
    snacksListCache.value = JSON.parse(JSON.stringify(props.checkList))
  }

  const close=(done) =>{
    props.checkList = snacksListCache.value
  }


//删除右边零食
const delCheck = (name)=>{
  const index = checkedList.value.findIndex(it => it === name)
  const indexAll = checkedListAll.value.findIndex(
      (it) => it.name === name
    )

    checkedList.value.splice(index, 1)
    checkedListAll.value.splice(indexAll, 1)
    emit('checkList', checkedListAll.value)
}

</script>

<template>
  <div class="addSnacks">
    <div class="leftCont">
      <div class="tabBut">
        <span v-for="(item, index) in snacksType" :key="index" :class="{ act: index == keyInd }" @click="checkTypeHandle(index, item.id)">
          {{ item.name }}
        </span>
      </div>

      <div class="tabList">
        <div class="table">
          <div v-if="snacksList.length == 0" style="padding-left: 10px">
            <el-empty description="该分类无在售零食" />
          </div>

          <el-checkbox-group v-if="snacksList.length > 0" v-model="checkedList" @change="checkedListHandle">
            <div v-for="(item, index) in snacksList" :key="item.name + item.id" class="items">
              <el-checkbox :key="index" :label="item.name">
                <div class="item">
                  <span style="flex: 3; text-align: left" >{{
                    item.name
                  }}</span>
                  <span>{{ item.status == 0 ? '停售' : '在售' }}</span>
                  <span >{{ (Number(item.price) ).toFixed(2)*100/100 }}</span>
                </div>
              </el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
    </div>
        
    <div class="ritCont">
      <div class="tit">
        已选菜品({{ checkedListAll.length }})
      </div>
      <div class="items">
        <div v-for="(item, ind) in checkedListAll" :key="ind" class="item">
          <span>{{ item.snacksName || item.name }}</span>
          <span class="price">￥ {{ (Number(item.price) ).toFixed(2)*100/100 }} </span>
          <span class="del" @click="delCheck(item.name)">
            <img src="./../../../assets/icons/btn_clean@2x.png" alt="">
          </span>
        </div>
      </div>
    </div>

  </div>
</template>

<style lang="scss" scoped>
.addSnacks {
  padding: 0 20px;
  display: flex;
  line-height: 40px;
  .empty-box {
    img {
      width: 190px;
      height: 147px;
    }
  }

  .borderNone {
    border: none !important;
  }
  span,
  .tit {
    color: #333;
  }
  .leftCont {
    display: flex;
    border-right: solid 1px #efefef;
    width: 60%;
    padding: 15px;
    .tabBut {
      width: 110px;
      font-weight: bold;
      border-right: solid 2px #f4f4f4;
      span {
        display: block;
        text-align: center;
        // border-right: solid 2px #f4f4f4;
        cursor: pointer;
        position: relative;
      }
    }
    .act {
      border-color:  #c60808;;
      color: #d64242;
    }
    .act::after {
      content: ' ';
      display: inline-block;
      background-color: #f4f4f4;
      width: 2px;
      height: 40px;
      position: absolute;
      right: -2px;
    }
    .tabList {
      flex: 1;
      padding: 15px;
      height: 400px;
      overflow-y: scroll;
      .table {
        border: solid 1px #f4f4f4;
        border-bottom: solid 1px #f4f4f4;
        .items {
          border-bottom: solid 1px #f4f4f4;
          padding: 0 10px;
          display: flex;
          .el-checkbox,
          .el-checkbox__label {
            width: 100%;
          }
          .item {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr; /* 设置三列，分别占据3:1:1的比例 */
  align-items: center; /* 确保所有项目在交叉轴上对齐 */
  grid-column-gap: 50px;
  span {
    text-align: center;
    font-weight: normal;
  }
}
        }
      }
    }
  }
  .ritCont {
    width: 40%;
    .tit {
      margin: 0 15px;
      font-weight: bold;
    }
    .items {
      height: 338px;
      padding: 4px 15px;
      overflow: scroll;
    }
    .item {
      box-shadow: 0px 1px 4px 3px rgba(0, 0, 0, 0.03);
      display: flex;
      text-align: center;
      padding: 0 10px;
      margin-bottom: 20px;
      border-radius: 6px;
      color: #818693;
      span:first-child {
        text-align: left;
        color: #20232a;
        flex: 70%;
      }
      .price {
        display: inline-block;
        flex: 70%;
        text-align: left;
      }
      .del {
        cursor: pointer;
        img {
          position: relative;
          top: 5px;
          width: 20px;
        }
      }
    }
  }
}
  
</style>